<template>
	<view class="container">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">

			<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false"
			 label="选择团队" prop="hdjf">
				<u-input type="select" :select-open="selectShowTeam" v-model="model.activity" placeholder="请选择" placeholderStyle="color: #0D1D36;"
				 input-align="right" @click="selectShowTeam = true"></u-input>
			</u-form-item>
			<u-form-item class="u-m-l-30 u-m-r-40" :required="required" :label-width="200" :label-position="labelPosition"
			 :border-bottom="true" label="团队人数" prop="num">
				<u-input :border="border" placeholder="请输入" v-model="model.num" type="text" input-align="right"></u-input>
			</u-form-item>
			<u-form-item class="u-m-l-30 u-m-r-40" :required="required" :label-width="200" :label-position="labelPosition"
			 :border-bottom="true" label="目的地" prop="area">
				<u-input :border="border" placeholder="请输入" v-model="model.area" type="text" input-align="right"></u-input>
			</u-form-item>
			<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="活动时间"
			 prop="timeInterval">
				<u-input :border="border" @click="dianji" placeholder="请选择" v-model="model.timeInterval" type="text" input-align="right"></u-input>
				<u-calendar v-model="show" ref="calendar" @change="changeTeam" :mode="mode" :start-text="startText" :end-text="endText"
				 :range-color="rangeColor" max-date="2022-10-01" :range-bg-color="rangeBgColor" :active-bg-color="activeBgColor">
				</u-calendar>
			</u-form-item>
			<u-form-item class="u-m-l-30 u-m-r-40" :required="required" :label-width="200" :label-position="labelPosition"
			 :border-bottom="true" label="需求资金" prop="needMoney">
				<u-input :border="border" placeholder="请输入" v-model="model.needMoney" type="text" input-align="right"></u-input>
			</u-form-item>
			<view class="u-flex u-row-start qita u-p-30">
				<image src="../../../static/img/shuoming.png"></image>
				<view class="u-m-l-20">商业策划</view>

			</view>
			<u-form-item class="zwpj u-m-l-30 u-m-r-30 " :label-position="labelPosition" prop="content">
				<u-input type="textarea" :border="border" placeholder="请输入活动简介" v-model="model.content" />
			</u-form-item>
		</u-form>
		<view class="warp u-m-t-20 u-p-30">
			<u-button class="button" @click="submit">确定</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="fetchDict.company_nature" value-name="id" label-name="name" v-model="selectShowQyxz"
			 @confirm="selectConfirmQyxz"></u-select>
			<u-select mode="single-column" :list="wxyList" v-model="selectShowWxy" @confirm="selectConfirmWxy"></u-select>
			<u-select mode="single-column" :list="wyxList" v-model="selectShowWyx" @confirm="selectConfirmWyx"></u-select>
			<u-select mode="single-column" :list="selectList2" v-model="selectShowPtrs" @confirm="selectConfirmPtrs"></u-select>
			<u-select mode="single-column" :list="selectList2" v-model="selectShowNsrs" @confirm="selectConfirmNsrs"></u-select>
			<u-select mode="single-column" :list="selectList2" v-model="selectShowNxrs" @confirm="selectConfirmNxrs"></u-select>
			<u-select mode="single-column" :list="selectList1" v-model="selectShowHdjf" @confirm="selectConfirmHdjf"></u-select>
			<u-select mode="single-column" :list="selectListNl" v-model="selectShowNl" @confirm="selectConfirmNl"></u-select>
			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
			<u-select :default-value="defaultValue" v-model="selectShowDy" mode="mutil-column-auto" value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>
			<u-select :default-value="defaultValue" v-model="selectShowQydy" mode="mutil-column-auto"  value-name="value" label-name="name" child-name="submenu"  :list="listCitys" @confirm="confirmCityQydy"></u-select>
			<u-select mode="single-column" :list="selectListTeam" v-model="selectShowTeam" value-name="id" label-name="name"
			 @confirm="confirmTeam"></u-select>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			let that = this;
			return {
				selectShowDy:false,
				fetchDict: [],
				selectShowQyxz: false,
				model: {},
				selectShowNl: false,
				selectListNl: [{
					value: '20岁以上',
					label: '20岁以上'
				}, {
					value: '21~30岁',
					label: '21~30岁'
				}, {
					value: '31~50岁',
					label: '31~50岁'
				}, {
					value: '50岁以下',
					label: '50岁以下'
				}],
				selectShowTeam: false,
				selectListTeam: [],
				//选择城市
				selectShowQydz: false,
				selectShowQydy: false,
				showCity: false,
				defaultValue: [3],
				listCitys: [],
				show: false,
				showDate: false,
				mode: 'range',
				result: "开始时间   至   结束时间",
				startText: '开始',
				endText: '结束',
				rangeColor: '#2979ff',
				rangeBgColor: 'rgba(41,121,255,0.13)',
				activeBgColor: '#2979ff',
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				/**
				 * form验证
				 * */
				wxyList: [],
				wyxList: [],
				sqzz: 0,
				selectList1: [{
						value: 'AA制',
						label: 'AA制'
					},
					{
						value: '赞助',
						label: '赞助'
					}
				],
				selectList2: [{
						value: '100',
						label: '100'
					},
					{
						value: '50',
						label: '50'
					}
				],
				rules: {
					ws: [{
						required: false,
						message: '请选择我是',
						trigger: 'change'
					}],
					wxy: [{
						required: false,
						message: '请选择我需要',
						trigger: 'change'
					}],
					wyx: [{
						required: false,
						message: '请选择我意向',
						trigger: 'change'
					}],
					tdmc: [{
						required: false,
						message: '请输入活动名称',
						trigger: 'change'
					}],
					ptrs: [{
						required: false,
						message: '请输入拼团人数',
						trigger: 'change'
					}],
					hddd: [{
						required: false,
						message: '请输入活动地点',
						trigger: 'change'
					}],
					xmzq: [{
						required: false,
						message: '请选择时间安排',
						trigger: 'change'
					}]
				},
				required: false,
				border: false,
				check: false,
				selectStatus: 'close',
				selectShowZyp: false,
				selectShowWs: false,
				selectShowWxy: false,
				selectShowWyx: false,
				selectShowPtrs: false,
				selectShowNsrs: false,
				selectShowNxrs: false,
				selectShowNl: false,
				selectShowHddd: false,
				selectShowHdjf: false,
				selectShowPpsx: false,
				pickerShow: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				reqBody: {},
				/**/

				/**
				 * 数字统计
				 * */
				startVal: 500,
				endVal: 500,
				separator: ',',
				decimals: 0,
				duration: 2000,
				autoplay: true,
				useEasing: true,
				current: 3,
				isStop: false,
				bold: false,
				fontSize: 24,
				color: '#fff',
				/**/
				keyIndex: 0,
				keywords: [{
					name: '企业',
					selected: true
				}, {
					name: '设计师',
					selected: false
				}, {
					name: '监理',
					selected: false
				}, {
					name: '大型企业',
					selected: false
				}, {
					name: '采购',
					selected: false
				}, {
					name: '监理',
					selected: false
				}]
			};
		},
		mounted() {},
		onLoad(options) {
			//获取省市区
			this.dictionaryFetchDict('company_nature'); //企业性质
			this.cityList();
			this.getMyTeam();
			if (options.data) {
				this.model = JSON.parse(decodeURIComponent(options.data));
				
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async dictionaryFetchDict(keyWords) {
				let result = await this.$apis.fetchDict({
					keyWords: keyWords
				});
				this.fetchDict[keyWords] = result.data;
			},
			selectConfirmQyxz(e) {
				this.model.xingzhi = '';
				e.map((val, index) => {
					this.model.xingzhi = val.label;
				});
			},
			async getMyTeam() {
				let result = await this.$apis.fetchWisdomActivityGroup();				
				if(result.data.length > 0){
					this.selectListTeam = result.data;
				}else{
					uni.showToast({
						title:"请先创建活动团队",
						icon:'none'
					})
					setTimeout(function(){
						uni.navigateBack()
					},2000);
					
				}
				
			},
			confirmCity(e) {
				this.model.hddd = '';
				e.map((val, index) => {
					this.model.hddd += this.model.hddd == '' ? val.label : '-' + val.label;
				})
			},
			confirmCityQydy(e) {
				this.model.dizhi = '';
				e.map((val, index) => {
					this.model.dizhi += this.model.dizhi == '' ? val.label : '-' + val.label;
				})
			},
			confirmTeam(e) {
				e.map((val, index) => {
					this.model.activity = val.label;
					this.model.activityId = val.value;
					for(var i in this.selectListTeam){						
						if(val.value == this.selectListTeam[i].id){
							this.model.num = this.selectListTeam[i].intention.ptrs
						}
					}
					
				})
			},
			async cityList() {
			let result = await this.$apis.fetchArea({level:2});	
				this.listCitys = result.data;
			},
			handleClickWeight(e) {
				var model = encodeURIComponent(JSON.stringify(this.model));
				let url = encodeURIComponent(JSON.stringify("wisdomcommune/smartActivities"));
				if (this.model.wyx == '企业') {
					uni.navigateTo({
						url: '../user/companyWeight?type=' + url + '&row=' + model
					})
				} else if (this.model.wyx == '团队') {
					uni.navigateTo({
						url: '../user/teamWeight?type=' + url + '&row=' + model
					})
				} else {
					uni.navigateTo({
						url: '../user/personWeight?type=' + url + '&row=' + model
					})
				}
			},
			//新增项目
			async submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.$mRouter.push({
							route: this.$mRoutesConfig.smartActivities,
							query: {
								row: encodeURIComponent(JSON.stringify(this.model))
							}
						})
					} else {
						console.log('验证失败');
					}
				});

			},
			selectKey(e) {
				this.keywords[e].selected = !this.keywords[e].selected;
			},
			//选择日期
			change(e) {
				this.model.timeBetween = e.startDate + " - " + e.endDate;
			},
			changeTeam(e) {
				this.model.timeInterval = e.startDate + " - " + e.endDate;
			},
			changeDate(e) {
				this.model.ppsx = e.result;
			},
			dianji() {
				this.show = true;
			},
			// 选择地区回调
			regionConfirm(e) {
				this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 选择
			selectConfirmWs(e) {
				this.model.ws = '';
				e.map((val, index) => {
					this.model.ws += this.model.ws == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmWxy(e) {
				this.model.wxy = '';
				e.map((val, index) => {
					this.model.wxy += this.model.wxy == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmWyx(e) {
				this.model.wyx = '';
				e.map((val, index) => {
					this.model.wyx += this.model.wyx == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmPtrs(e) {
				this.model.ptrs = '';
				e.map((val, index) => {
					this.model.ptrs += this.model.ptrs == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmNsrs(e) {
				this.model.nsrs = '';
				e.map((val, index) => {
					this.model.nsrs += this.model.nsrs == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmNxrs(e) {
				this.model.nxrs = '';
				e.map((val, index) => {
					this.model.nxrs += this.model.nxrs == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmNl(e) {
				this.model.nl = '';
				e.map((val, index) => {
					this.model.nl += this.model.nl == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmHddd(e) {
				this.model.hddd = '';
				e.map((val, index) => {
					this.model.hddd += this.model.hddd == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmHdjf(e) {
				if (e[0].value == "申请赞助") {
					this.sqzz = 1
				} else {
					this.sqzz = 0
				}
				this.model.hdjf = '';
				e.map((val, index) => {
					this.model.hdjf += this.model.hdjf == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmPpsx(e) {
				this.model.ppsx = '';
				e.map((val, index) => {
					this.model.ppsx += this.model.ppsx == '' ? val.label : '-' + val.label;
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	container {
		background: #fff;
	}

	.top {
		width: 100%;
		height: 260rpx;
		background: #ab61ff;

		.above {
			display: flex;
			justify-content: center;
			margin-left: -46rpx;

			.picture {
				width: 117.8rpx;
				height: 137.4rpx;
				margin-left: 46rpx;

			}
		}

		.below {
			display: flex;
			justify-content: center;
			margin-left: -46rpx;

			.picture {
				width: 117.8rpx;
				height: 137.4rpx;
				margin-left: 46rpx;
				margin-top: 1rpx;
			}
		}
	}

	.qita {

		image {
			width: 29rpx;
			height: 29rpx;
			;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}

	.count {
		margin-top: -50rpx;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
	}

	.fgx1 {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 151rpx auto 73rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.word {
		font-size: 36rpx;
		color: #0d1d36;
		font-weight: bold;
	}
</style>
